﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例演示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 注意：项目正式环境请勿引用该地址 -->

    <link rel="stylesheet" href="~/lib/layui/css/layui.css">
</head>
<body>

    <div>注：通过输入城市名称进行为期五天的天气查询</div><br />
    <div class="demoTable">
        搜索城市：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>


    <!-- 注意：项目正式环境请勿引用该地址 -->
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/layui/layui.js"></script>

    <script>
        $('.demoTable .layui-btn').on('click', function () {
            var table = layui.table;
            var demoReload = layui.$('#demoReload').val();
            //方法级渲染
            table.render({
                elem: '#LAY_table_user'
                , type: "get"
                , url: '/api/tianqi/GetById'
                , where: { "demoReload": demoReload }
                , cols: [[
                    /*{ checkbox: true, fixed: true }*/
                    { field: 'date', title: '日期', sort: true, fixed: true }
                    , { field: 'high', title: '最高气温' }
                    , { field: 'fengxiang', title: '风向' }
                    , { field: 'low', title: '最低气温' }
                    , { field: 'fengli', title: '风力' }
                    , { field: 'type', title: '天气' }
                ]]
                , id: 'testReload'
                , page: true
                , height: 310
            });

            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload').val();

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            demoReload: demoReload
                        }
                    });
                }
            };
        });

    </script>

</body>
</html>